<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
    <script src="../lib/vue-router.js"></script>
    <style>
        .box1 {
            width: 60%;
            border: 1px solid darkorchid;
            border-radius: 10px;
            padding: 20px;
        }

        .router-link-exact-active,
        .router-link-active {
            color: deeppink;
            border: 1px solid deepskyblue;
            padding: 5px;
            border-radius: 5px;
            background: darkslateblue;
        }
    </style>
</head>

<body>
    <div id="app">
        <h2> {{title }}</h2>
        <myhead></myhead>
        <!-- 5.路由出口  申明加载路由的地址 -->
        <router-view class="box1"></router-view>

        <!-- 6.路由导航  声明式导航 a -->
        <a href="#/home">首页1</a>
        <router-link to="/home">首页2</router-link>
        <router-link to="/find">朋友圈</router-link>
        <router-link to="/news"> 新闻 </router-link>

    </div>

    <template id="home">
        <div>
            <h2>Home - Home - Home</h2>
        </div>
    </template>

    <template id="find">
        <div>
            <h2>Find - Find 朋友圈
            </h2>
        </div>
    </template>


    <template id="head">
        <header>
            WH2110-DAYDAYUP
        </header>
    </template>
    <template id="news">
        <div>
            <h2>News - News - 今日新闻 </h2>
        </div>
    </template>

</body>
<script>
    // 0.如果使用模块机制编程，导入Vue和VueRouter，要调用Vue.use（VueRouter）
    const Head = {
        template: "#head"
    }
    Vue.component("myhead", Head)

    // 1.定义（路由）组件
    const Home = {
        template: "#home"
    }
    const Find = {
        template: "#find"
    }
    const News = Vue.extend({
        template: "#news"
    })
    const NotFound = {
        template: "<h1>404 - 404 - NotFound </h1>",
        methods: {}
    }


    // 2.定义路由   （定义路由里面组件和地址路径的映射关系）
    const routes = [
        {
            path: "/home",
            component: Home
        },
        {
            path: "/find",
            component: Find,
        },
        {
            path: "/news",
            component: News
        },
        {
            path: "/404",
            component: NotFound
        },
        {
            path: "*",
            component: NotFound
        }
    ]

    // 3.创建路由对象
    const router = new VueRouter({
        routes: routes
    })


    // 挂载到根实例
    const vm = new Vue({
        router,
        el: "#app",
        data: {
            title: "Vue 路由的初步学习 "
        },
        watch: {
            '$route': function (to, from) {
                console.log(to)   // 即将进入的路由
                console.log(from) // 即将离开的路由 
            }
        },
        mounted() {
            console.log(this.$router)  // router 路由对象  负责路由切换 重定向
            console.log(this.$route)   // 路由信息对象  记录当前激活路由的相关数据信息  (参数 params query meta )
        }

    })
</script>
<!-- 
    node 路由 根据不同的url接口 返回对应的不同的数据或页面
    Vue 路由 router 根据不同的url路径 pathname 匹配路由里面的path 匹配成功就加载对应的组件（component）

    Vue Router 是Vue.js 官方的路由管理器
    它和Vue.js 的核心深度集成，让构建单页面应用变得易如反掌

    路由作用 实现构造单页面应用  index.html 其他页面 组件形成加载
    single-page-appliaction     （SPA）

    将组件 （components) 映射到路由 （routes), 然后告诉 Vue Router  在那里渲染它们

    a.掌握 配置最基本的路由 流程
    b.路由传递参数 动态路由
    c.嵌套路由
 -->

</html>